<template>
  <div class="login pb">
    <div class="container fix input-contain">
      <img src="../assets/logonimg_03.jpg" alt="" class="flo-left left-img">
      <div class="flo-right bg-c-fff login-box">
        <h2 class="box-title">找回密码</h2>
        <form @submit.prevent="onsubmitClick">
          <ul class="input-box">
            <li><span>手机号码</span>
              <input type="text" placeholder="请输入手机号码" class="input-css" v-model='phone'>
            </li>
            <li class="magin-bom">
              <span>验证码：</span>
              <input type="text" placeholder="请输入数字验证码" class="input-css" v-model="numberCode">
              <img :src="numberCodeUrl" class="number-code-img" @click="onNumberCodeImgClick">
            </li>
            <li>
              <span>手机验证码：</span>
              <input type="text" placeholder="请输入验证码" class="input-css input-w4" v-model="verificationCode">
              <button type="button" class="blue-button button vm" @click="onGetPhoneCode">{{countdown | codeText}}</button>
            </li>
            <li>
              <span>新密码：</span>
              <input type="password" placeholder="请输入新密码" class="input-css" v-model="password">
            </li>
            <li>
              <span>确认新密码：</span>
              <input type="password" placeholder="请再次输入密码" class="input-css" v-model="passwords">
            </li>
            <li class="res-pass-btn tc">
              <button type="submit" class="button-css cup xl-btn">确认</button>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  components: {},
  data() {
    return {
      type: '',
      phone: '',
      verificationCode: '',
      numberCode: '',
      numberCodeUrl: '/member/verification/code',
      password: '',
      passwords: '',
      countdown: -1,
      countdownTimer: 0
    }
  },
  methods: {
    onNumberCodeImgClick() {
      this.numberCodeUrl = '/member/verification/code?r=' + Math.random()
    },
    onGetPhoneCode() {
      if (this.countdown > 0) {
        this.$toasted.show('请稍后再重新获取验证码')
        return
      }
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.phone)) {
        this.$toasted.show('请输入有效手机号')
        return
      }
      if (!this.numberCode) {
        this.$toasted.show('请输入数字验证码')
        return
      }
      this.$http.post('/member/forget_password', {
        phone: this.phone,
        verifyCode: this.numberCode
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('验证码已发出，请注意查收')
          this.countdown = 60
          this.countdownTimer = setInterval(() => {
            this.countdown--
              if (this.countdown < 0) {
                this.countdown = 0
                clearInterval(this.countdownTimer)
              }
          }, 1000)
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        console.log('网络出错')
      })
    },
    onsubmitClick() {
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.phone)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      if (!this.numberCode) {
        this.$toasted.show('请输入数字验证码')
        return
      }
      if (!this.verificationCode) {
        this.$toasted.show('请输入手机验证码')
        return
      }
      if (!this.password) {
        this.$toasted.show('请输入新密码')
        return
      }
      if (this.password.length < 6) {
        this.$toasted.show('密码不能少于6个字符')
        return
      }
      if (this.password.length > 24) {
        this.$toasted.show('密码不能大于24个字符')
        return
      }
      if (this.password !== this.passwords) {
        this.$toasted.show('两次输入密码不同')
        return
      }
      this.$http.post('/member/forget_password_advance', {
        phone: this.phone,
        memberType: 1,
        verifyCode: this.verificationCode,
        password: this.password
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('修改成功！')
          this.$router.push('/login')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    }
  },
  filters: {
    codeText(v) {
      if (v === -1) {
        return '获取验证码'
      } else if (v === 0) {
        return '重新获取'
      } else {
        return '重新获取(' + v + ')'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.box-title {
  color: #a5a5a5;
  line-height: 40px;
  font-weight: normal;
  border-bottom: 1px solid #f2f2f2;
  font-size: 14px;
  padding-left: 40px;
}

.res-pass-btn {
  padding-left: 37px;
}

.pb {
  padding-bottom: 70px;
}

.login .input-box {
  padding: 0px 0 45px 0;
}

.login-box {
  width: 600px;
}

.login-box li:nth-of-type(1) {
  margin-top: 30px;
}

.login-box li:nth-of-type(1) input,
.login-box li:nth-of-type(4) input,
.login-box li:nth-of-type(5) input {
  width: 330px;
}

.login-box li {
  margin-top: 20px;
}

.login-box li:nth-of-type(2) input,
.login-box li:nth-of-type(3) input {
  width: 230px;
}

.login-box li:nth-of-type(3) button {
  width: 100px;
  height: 40px;
  margin-left: -4px;
}

form {
  height: 379px;
}

.input-box span {
  width: 85px;
}

.xl-btn {
  width: 120px;
  height: 40px;
}

</style>
